<!doctype html>
<html>
<head>
    <title>{{$article.title}}</title>
    <link type="text/css" rel="stylesheet" href="{{$contextPath}}/resource/wx/css/site.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
</head>
<body>
    <div class="page">
        <div class="header">
            <div class="title">{{$article.title}}</div>
            <div>
                <span class="date">{{$article.addDate}}</span>
                <span class="author">{{$article.auth}}</span>
                <a class="subscribe"  id="subscribe">上海汽车报</a>
            </div>
        </div>
        <div class="content">
            <div>{{$article.content}}</div>
        </div>

        <div class="dialog">
            <div class="overlay"></div>

            <div class="box">
                <div class="close" id="close">×</div>
                <div class="code">
                    <img src="http://open.weixin.qq.com/qr/code/?username=shautonews">
                </div>
                <p class="guide">长按图片【识别二维码】关注公众号</p>
                <hr />
                <p class="title">无法识别二维码</p>
                <p class="step">1.打开微信，点击‘添加朋友’</p>
                <p class="step">2.搜索微信号：shautonews</p>
                <p class="step">3.点击‘关注’，完成</p>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="//res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <script type="text/javascript" src="//cdn.bootcss.com/zepto/1.1.6/zepto.js"></script>
    <script type="text/javascript">
        wx.config({
            debug: false,
            appId: '{{$wxsign.appid}}',
            timestamp: '{{$wxsign.timestamp}}',
            nonceStr: '{{$wxsign.nonceStr}}',
            signature: '{{$wxsign.signature}}',
            jsApiList: [
                'checkJsApi',
                'onMenuShareTimeline',
                'onMenuShareAppMessage',
                'onMenuShareQQ',
                'onMenuShareWeibo'
            ]
        });
        wx.ready(function () {
            wx.checkJsApi({
                jsApiList: [
                    'checkJsApi',
                    'onMenuShareTimeline',
                    'onMenuShareAppMessage',
                    'onMenuShareQQ',
                    'onMenuShareWeibo'
                ]
            });
            wx.onMenuShareAppMessage({
                title: '{{if $article.title2}}{{$article.title2}}{{else}}{{$article.title}}{{/if}}',
                desc: '{{$article.abstracts}}',
                link: '{{$wxsign.url}}',
                imgUrl: '{{if $article.cover}}{{$article.cover}}{{/if}}',
                trigger: function (res) {
                    // 不要尝试在trigger中使用ajax异步请求修改本次分享的内容，因为客户端分享操作是一个同步操作，这时候使用ajax的回包会还没有返回
                },
                success: function (res) {

                },
                cancel: function (res) {

                },
                fail: function (res) {

                }
            });
            wx.onMenuShareTimeline({
                title: '{{if $article.title2}}{{$article.title2}}{{else}}{{$article.title}}{{/if}}',
                link: '{{$wxsign.url}}',
                imgUrl: '{{if $article.cover}}{{$article.cover}}{{/if}}',
                trigger: function (res) {

                },
                success: function (res) {

                },
                cancel: function (res) {

                },
                fail: function (res) {

                }
            });
        });
        $(function(){
            $("#subscribe").on("click", function(){
                $("div.dialog").show();
            });
            $(".code img").on("click", function(event){
                event.stopPropagation();
            });
            $(".dialog").on("click", function(){
                $("div.dialog").hide();
            });
        })
    </script>
</body>
</html>